<template>
  <div class="conversion-table">
    <el-table
      :data="tableData"
      empty-text="暂无数据!"
      style="width: 100%"
      table-layout="fixed"
      stripe
    >
      <el-table-column align="center" prop="productName" label="产品" width="180">
        <template #default="scope">
          <el-tag effect="light">{{ scope.row.productName }}{{ scope.row.color }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="重量换算个数 (kg)" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.weight" class="w-50 m-2 weight-input" size="small" placeholder="请输入重量" @change="weightToNumber(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="个数换算重量(个)" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.number" class="w-50 m-2 number-input" size="small" placeholder="请输入个数" @change="numberToWeight(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="singleWeight" label="单个克数(克)" width="180">
        <template #default="scope">
          {{ scope.row.singleWeight }} g
        </template>
      </el-table-column>
      <el-table-column align="center" prop="oneBoxWeight" label="每盆大约重量(kg)" width="180">
        <template #default="scope">
          {{ scope.row.oneBoxWeight }} kg
        </template>
      </el-table-column>
      <el-table-column align="center" prop="oneBoxNumber" label="每盆大约个数(个)" width="180">
        <template #default="scope">
          约 {{ scope.row.oneBoxNumber }} 个/盆
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updatedTime" label="最新围数日期" width="180" />
      <el-table-column align="center" prop="operatorNickname" label="围数人" width="180" />
      <el-table-column align="center" prop="name" label="操作" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: '',
      product: '',
      needUpdate: '',
      sortField: '',
      sortord: '',
      updateTime: [],
      screenData: {},

      tableData: [
        {
          id: 1,
          productName: '01',
          color: '灰色',
          weight: '22',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 2,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 3,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 4,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 5,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 6,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 7,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 8,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 9,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        },
        {
          id: 10,
          productName: '01',
          color: '灰色',
          weight: '',
          number: '',
          singleWeight: '9.50',
          oneBoxWeight: '38',
          oneBoxNumber: '4100',
          updatedTime: '2024-7-16 13:30:41',
          operatorNickname: '华'
        }
      ]
    }
  },

  methods: {
    weightToNumber(row) {
      const number = row.weight * 1000 / row.singleWeight
      const numstr = '' + number
      const position = numstr.indexOf('.')
      const step = +numstr.substr(position + 1, 1)
      row.number = ~~number
      if (step >= 7) {
        row.number += 1
      }
    },

    numberToWeight(row) {
      row.weight = (row.number * row.singleWeight / 1000).toFixed(4)
    }
  }
}

</script>

<style lang="scss" scoped>
.conversion-table{
// max-height: 528px;
// overflow: hidden;
padding-bottom: 20px;
  .odd-row {
    td{
      background-color: #f00;
    }
  }
  .even-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
}

v-deep .el-table__body{
td{
    background-color: #fefefe;
}
}

v-deep .el-table--striped{
.el-table__body{
  tr.el-table__row--striped{
    td{
      background-color: #efefef;
    }
  }
}
}
v-deep .el-table--enable-row-hover{
  .el-table__body{
    tr:hover{
      >td{
        background-color: #66b1ff;
        color: #fff;
      }
    }
  }
}

v-deep .el-table th.is-leaf{
  background-color: #545c64;
  color: #fff;
}
.weight-input,
.number-input{
  ::v-deep.el-input__inner{
    text-align: center;
  }
  v-deep .el-input--small{
    .el-input__inner{
      text-align: center;
    }
  }
}
</style>
